<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" lable-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="医疗品名" prop="name" placeholder="请输入物品名称" >
            <el-input v-model="ruleForm.name"  />
        </el-form-item>
        <el-form-item label="医疗分类" prop="sort">
            <el-select v-model="ruleForm.sort">
                <el-option label="疫苗类" value="疫苗类" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="医品规格" prop="type" placeholder="请输入规格，如：100ml">
            <el-input v-model="ruleForm.type" />
        </el-form-item>
        <el-form-item label="生产日期" required>
            <el-form-item prop="starttime">
                <el-date-picker v-model="ruleForm.starttime" type="time" label="请选择日期" placeholder="请选择日期"
                    style="width: 100%" />
            </el-form-item>
        </el-form-item>
        <el-form-item label="有效日期" required>
            <el-form-item prop="endtime">
                <el-date-picker v-model="ruleForm.endtime" type="time" label="请选择日期" placeholder="请选择日期"
                    style="width: 100%" />
            </el-form-item>
        </el-form-item>
        <el-form-item label="入库数量" required>
            <el-input-number v-model="ruleForm.count" :min="1" :max="10" @change="handleChange" />
        </el-form-item>
        <el-form-item label="医品价格" required>
            <el-input-number v-model="ruleForm.price" :min="1" :max="10" @change="handleChange" />
        </el-form-item>
        <el-form-item label="医疗品图" required>
            <el-upload class="avatar-uploader" action="http://129.211.169.131:21006/drugs/uploaddrugs"
                :show-file-list="false" :on-success="handleAvatarSuccess" >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">确认添加</el-button>
      <el-button type="info" @click="resetForm(ruleFormRef)">返回上一级</el-button>
    </el-form-item>
    </el-form>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import Dayjs from 'dayjs'

import type { UploadProps } from 'element-plus'
import store from '@/store'

const imageUrl = ref('')

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
    sort: '',
    count: 1,
    starttime: '',
    endtime: '',
    type: '',
    price: 1,
    img:''
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入医疗品名', trigger: 'blur' },
        { min: 3, max: 10, message: '名字长度为3-10', trigger: 'blur' },
    ],
    sort: [
        { required: true, message: '请选择医疗分类', trigger: 'change' },
    ],
    type: [
        { required: true, message: '请输入医品规模', trigger: 'blur' },
    ],
    starttime: [
        { type: 'date', required: true, message: '请选择生产日期', trigger: 'change' },
    ],
    endtime: [
        { type: 'date', required: true, message: '请选择有效日期', trigger: 'change' },
    ],
    count: [
        { required: true, message: '请选择入库数量', trigger: 'change' },
    ],
    price: [
        { required: true, message: '请选择医品价格', trigger: 'change' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            ruleForm.starttime = Dayjs().format('YYYY-MM-DD')
            ruleForm.endtime = Dayjs().format('YYYY-MM-DD')
            console.log(ruleForm);

            store.dispatch('ware/A_drugAdd',ruleForm)
            
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

const handleChange = (value: number) => {
    console.log(value)
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
    console.log(response);
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    ruleForm.img = response.drugs
}

// const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
//   if (rawFile.type !== 'image/jpeg') {
//     ElMessage.error('Avatar picture must be JPG format!')
//     return false
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error('Avatar picture size can not exceed 2MB!')
//     return false
//   }
//   return true
// }
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>